<template>
  <div>
    <ScreenAdapter class="login-container">
      <div class="bgc_board" />
      <div class="card_area">
        <div class="logo" />
        <div class="flex">
          <div class="showPic_area">
            <div class="the_Pic" />
          </div>
          <div class="line" />
          <div class="form_area">
            <div class="form">
              <div class="title">文储教育</div>
              <div class="operate_area">
                <el-form ref="loginForm" :model="loginForm" :rules="rules">
                  <!-- 商户号 -->
                  <el-form-item prop="username">
                    <el-input
                      ref="username"
                      v-model="loginForm.username"
                      oninput="value=value.replace(/[^\d]/g,'')"
                      class="input"
                      placeholder="请输入商户号"
                      @mouseover.native="in_username"
                      @mouseout.native="out_username"
                      @focus="foucs_username"
                      @blur="blur_username"
                    >
                      <div slot="prefix" class="username_icon" />
                      <div
                        v-show="loginForm.username && (hovering_username || focusing_username)"
                        slot="suffix"
                        class="clear_icon"
                        @click="clearItem('username')"
                      />
                    </el-input>
                  </el-form-item>
                  <!-- 手机号码 -->
                  <el-form-item prop="phone">
                    <el-input
                      ref="phone"
                      v-model="loginForm.phone"
                      oninput="value=value.replace(/[^\d]/g,'')"
                      class="input"
                      placeholder="请输入手机号码"
                      :maxlength="11"
                      @mouseover.native="in_phone"
                      @mouseout.native="out_phone"
                      @focus="foucs_phone"
                      @blur="blur_phone"
                    >
                      <div slot="prefix" class="username_icon" />
                      <div
                        v-show="loginForm.phone && (hovering_phone || focusing_phone)"
                        slot="suffix"
                        class="clear_icon"
                        @click="clearItem('phone')"
                      />
                    </el-input>
                  </el-form-item>
                  <!-- 密码 -->
                  <el-form-item prop="password">
                    <el-input
                      ref="password"
                      v-model="loginForm.password"
                      class="input"
                      placeholder="请输入您的密码"
                      :type="password_type"
                      @keyup.enter.native="submit"
                    >
                      <div slot="prefix" class="pwd_icon" />
                      <div slot="suffix" :class="password_type ? 'hide_pwd_icon' : 'show_pwd_icon'" @click="showPwd" />
                    </el-input>
                  </el-form-item>
                </el-form>

                <div class="flex pwd_help">
                  <el-checkbox v-model="remember">记住账户</el-checkbox>
                  <router-link to="/resetPassword" class="">忘记密码?</router-link>
                </div>
                <!-- <button class="submit_btn" @click="submit" v-on:keyup.enter.native="enterKeyDown"
                :disabled="loading">立即登录</button> -->
                <el-button class="submit_btn" type="primary" :disabled="loading" :loading="loading" @click="submit">
                  立即登录
                </el-button>
                <div class="protocol">
                  登录即代表同意<a style="color: rgba(0, 90, 255, 1)">《用户服务协议》</a>
                </div>
                <div class="version">版本号{{ version }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ScreenAdapter>
    <!-- <safetyVerification :visible="safetyVerification_visible" :login-form="loginForm" @close="safetyVerification_visible = false" /> -->
  </div>
</template>

<script>
import AES from 'crypto-js/aes'
import encUtf8 from 'crypto-js/enc-utf8'
import ScreenAdapter from '@/components/ScreenAdapter'
// import safetyVerification from './safetyVerification.vue'
import { mapActions } from 'vuex'
import { validatePhone } from '@/utils/validate'

export default {
  name: 'Login',
  components: {
    ScreenAdapter // safetyVerification
  },
  data() {
    const validateAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账户不能为空'))
      } else {
        if (value.length < 4 || value.length > 10) {
          callback(new Error('账户长度不能少于4位，且不能超过10位'))
        } else {
          if (!/^[0-9]*$/g.test(value)) {
            callback(new Error('商户号只能包含数字'))
          }
        }
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('密码不能为空'))
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度不能少于8位，且不能超过16位'))
        } else {
          if (!/[a-zA-Z]+(?=\d+)|\d+(?=[a-zA-Z]+)/g.test(value)) {
            callback(new Error('密码必须同时包含字母、数字'))
          }
          callback()
        }
      }
    }
    return {
      version: 'v1.0.0',
      loginForm: {
        username: '',
        phone: '',
        password: ''
      },
      remember: false,
      loading: false,
      password_type: 'password',
      redirect: undefined,
      hovering_username: false,
      focusing_username: false,
      hovering_phone: false,
      focusing_phone: false,
      rules: {
        username: [{ validator: validateAccount, trigger: 'blur' }],
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      },
      safetyVerification_visible: false
    }
  },
  beforeDestroy() {
    document.onkeydown = undefined
  },
  created() {
    // const me = this
    // document.onkeydown = (e) => {
    //   const key = window.event ? e.keyCode : e.which
    //   if (key === 13) {
    //     me.submit()
    //   }
    // }
  },
  mounted() {
    const remb = localStorage.getItem('remb')
    if (remb === 'true') {
      this.remember = true
      const account = localStorage.getItem('loginAccount')
      const loginPhone = localStorage.getItem('loginPhone')
      // const loginPw = localStorage.getItem('loginPw')
      this.loginForm.username = AES.decrypt(account, 'Crhash').toString(encUtf8)
      this.loginForm.phone = AES.decrypt(loginPhone, 'Crhash').toString(encUtf8)
      // this.loginForm.password = AES.decrypt(loginPw, 'Crhash').toString(encUtf8)
    }
  },
  methods: {
    submit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((res) => {
              this.loading = false
              this.saveSession()
              if (res.code === 4005) {
                this.safetyVerification_visible = true
                return
              }
              this.$router.push({ path: this.redirect || '/' })
            })
            .catch((err) => {
              console.error(err)
              this.loading = false
            })
          // setTimeout(() => {
          //   this.loading = false
          //   this.getMerchCoins()
          //   this.getMerchProducts()
          //   this.getMerchConfigs()
          //   this.getMerchPermissions()
          //   this.$router.push({ path: this.redirect || '/' })
          // }, 1000)
        } else {
          return false
        }
      })
    },
    // 保持会话
    saveSession() {
      if (this.remember) {
        const account = AES.encrypt(this.loginForm.username, 'Crhash').toString()
        const phone = AES.encrypt(this.loginForm.phone, 'Crhash').toString()
        // const pw = AES.encrypt(this.loginForm.password, 'Crhash').toString()
        localStorage.setItem('remb', true)
        localStorage.setItem('loginAccount', account)
        localStorage.setItem('loginPhone', phone)
        // localStorage.setItem('loginPw', pw)
      } else {
        localStorage.setItem('remb', false)
        localStorage.removeItem('loginAccount')
        localStorage.removeItem('loginPhone')
        localStorage.removeItem('loginPw')
      }
    },
    clearItem(item) {
      this.loginForm[item] = ''
      this.$nextTick(() => {
        this.$refs[item].focus()
      })
    },
    showPwd() {
      if (this.password_type === 'password') {
        this.password_type = ''
      } else {
        this.password_type = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    in_username() {
      this.hovering_username = true
    },
    out_username() {
      this.hovering_username = false
    },
    foucs_username() {
      this.focusing_username = true
    },
    blur_username() {
      this.focusing_username = false
    },
    in_phone() {
      this.hovering_phone = true
    },
    out_phone() {
      this.hovering_phone = false
    },
    foucs_phone() {
      this.focusing_phone = true
    },
    blur_phone() {
      this.focusing_phone = false
    },
    ...mapActions({
      getMerchCoins: 'basicSettings/getMerchCoins',
      getMerchProducts: 'basicSettings/getMerchProducts',
      getMerchConfigs: 'basicSettings/getMerchConfigs',
      getMerchPermissions: 'basicSettings/getMerchPermissions'
    })
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error {
  font-size: 14px;
}
::v-deep .el-checkbox__label {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: SourceHanSansCN, SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  color: #434343;
  line-height: 24px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 80px;
  padding-right: 50px;
  color: #000000 !important;
}
::v-deep .el-input__inner {
  padding-left: 80px;
  padding-right: 50px;
  width: 358px;
  height: 70px;
  background: #ebf3f5;
  border-radius: 8px;
  font-size: 20px;
  font-family: DIN, DIN-Bold;
  font-weight: 700;
  color: #000000 !important;
  line-height: 70px;
}
::v-deep .el-input__inner::placeholder {
  color: #9fdfcb;
}

.login-container {
  .bgc_board {
    width: 1129px;
    height: 888px;
    max-height: 888px;
    // background: url('../../assets/login/bg_board.png');
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin-top: 15px;
  }
  .card_area {
    width: 1440px;
    height: 750px;
    background: #f8fbfc;
    border-radius: 15px;
    box-shadow: 0px 0px 60px 0px #00292217;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 30px 40px;
    .logo {
      height: 50px;
      font-size: 36px;
    }
    .showPic_area {
      width: 874px;
      .the_Pic {
        margin: 97px auto auto;
        width: 576px;
        height: 430px;
        // background: url('../../assets/login/login_pic1.png');
        background-size: 100%;
      }
    }
    .form_area {
      width: 485px;
      margin: 0;
      .form {
        margin-left: 100px;
        .title {
          height: 30px;
          font-size: 30px;
          font-family: SourceHanSansCN, SourceHanSansCN-Bold;
          font-weight: 700;
          text-align: left;
          color: #434343;
          line-height: 30px;
        }
        .operate_area {
          padding: 40px 28px 0 0;
          .input {
            margin: 0;
            width: 358px;
            height: 69px;
            background: #ebf3f5;
            border-radius: 8px;
          }
          .pwd_help {
            margin-top: 40px;
            height: 16px;
            font-size: 16px;
            font-family: SourceHanSansCN, SourceHanSansCN-Medium;
            font-weight: 500;
            text-align: right;
            color: #434343;
            line-height: 16px;
          }
          .submit_btn {
            margin-top: 50px;
            width: 358px;
            height: 60px;
            background: #009968;
            border-radius: 8px;
            font-size: 20px;
            font-family: SourceHanSansCN, SourceHanSansCN-Medium;
            font-weight: 500;
            text-align: center;
            color: #ffffff;
            border: none;
            cursor: pointer;
            line-height: 0;
          }
          .protocol {
            height: 14px;
            font-size: 14px;
            font-family: SourceHanSansCN, SourceHanSansCN-Medium;
            font-weight: 500;
            text-align: center;
            color: #434343;
            line-height: 14px;
            margin-top: 20px;
          }
          .version {
            margin-top: 75px;
            font-size: 14px;
            font-family: SourceHanSansCN, SourceHanSansCN-Regular;
            font-weight: 400;
            text-align: center;
            color: #a2a2a2;
            line-height: 14px;
          }
        }
      }
    }
  }
}
.line {
  height: 464px;
  border: 1px solid #ebf3f5;
  margin-top: 67px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.username_icon {
  width: 28px;
  height: 28px;
  // background: url('../../assets/login/username_icon.png');
  background-size: 100%;
  margin: 21px;
}
.clear_icon {
  width: 20px;
  height: 20px;
  // background: url('../../assets/login/clear_icon.png');
  background-size: 100%;
  margin: 25px 20px;
  cursor: pointer;
}
.pwd_icon {
  width: 28px;
  height: 28px;
  // background: url('../../assets/login/pwd_icon.png');
  background-size: 100%;
  margin: 21px;
}
.show_pwd_icon {
  width: 20px;
  height: 14px;
  // background: url('../../assets/login/show_pwd.png');
  background-size: 100%;
  margin: 28px 20px;
  cursor: pointer;
}

.hide_pwd_icon {
  width: 19px;
  height: 10px;
  // background: url('../../assets/login/hide_pwd.png');
  background-size: 100%;
  margin: 30px 20px;
  cursor: pointer;
}
</style>
